<!-- 安保护卫 -->
<template>
	<view class="container pb-30">
		<Navbar title="报告查询" bgColor="#334467" leftIconColor="#fff" :titleStyle="{color: '#fff'}" />
		
		<view class="content">
			<view class="banner d-flex relative">
				<image class="banner_bg absolute" mode="widthFix" src="/static/image/security/banner_border.svg"></image>
				<text class="banner_title relative">安保护卫，安心为先</text>
				
				<image class="banner_icon absolute" src="/static/image/security/banner.svg" mode="widthFix" />
			</view>
			
			<Report class="mt-10 mb-30" />
			
			<RuleForm btnText="立即查询￥39.8" bgColor="#fff" pageColor="#6642EA" />
		</view>
	</view>
</template>

<script setup>
	import {reactive} from 'vue'
	import Navbar from '@/components/Navbar/index.vue'
	import Report from '@/query/Security/components/Report.vue'
	import RuleForm from '@/query/components/ruleForm.vue'
</script>

<style lang="scss" scoped>
@import '@/query/scss/index.scss';

.container {
	background: linear-gradient(to bottom, #25375D, #fff);
	
	.banner {
		align-items: center;
		justify-content: space-between;
		overflow: hidden;
		height: 400rpx;
		&_bg {
			top: -260rpx;
			left: -80rpx;
			width: 900rpx;
		}
		&_title {
			top: 25rpx;
			left: 40rpx;
			z-index: 2;
			color: #fff;
			font: {
				weight: bold;
				size: 38rpx;
			}
		}
		&_icon {
			top: -30rpx;
			right: -75rpx;
			width: 480rpx;
		}
	}
}
</style>